/**
 * Created by tanbingqin on 2020/8/21.
 */
import {messages, deepFullCopy} from "share/common";
import React from 'react'
import {connect} from "react-redux";
import { message, Icon, Modal, Button, Row, Col, Input, Timeline, Spin, Radio } from 'antd'
const TextArea = Input.TextArea;
import approveService from 'containers/approve/approve.service'
import errorMessage from 'share/errorMessage'
import 'styles/approve/approve-return.scss'
import Condition from 'components/condition';
const If = Condition.If;
import Skeleton from 'components/skeleton';
import noNode from 'images/no-node.png'

class ApproveReturn extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      submitLoading: false,
      nodeList: [], //退回至可选节点列表
      approvalTxt: '',
      selectedNodeOID: '',
    }
  }

  componentWillMount() {}

  componentWillReceiveProps(nextProps) {
    const { modalVisible } = this.props;
    if (!modalVisible && nextProps.modalVisible) {
      this.setState({approvalTxt: nextProps.quickTxt, loading: true});
      approveService.getReturnNodeList(nextProps.entities).then(res => {
        this.setState({
          nodeList: res.data.approvalPassingHistoryNodeDTOList || [],
          loading: false
        });
      }).catch(err => {
        this.setState({loading: false});
        errorMessage(err.response);
      });
    }
    if (modalVisible && !nextProps.modalVisible) {
      this.setState({
        nodeList: [],
        approvalTxt: '',
        selectedNodeOID: ''
      });
    }
  }

  //isSuccess 是否是成功的返回
  closeModal = (isSuccess) => {
    const { onClose } = this.props;
    if (onClose) {
      onClose(isSuccess);
    }
  };

  handleReturnTo = () => {
    const { entities } = this.props;
    const { approvalTxt, selectedNodeOID } = this.state;
    let params = {
      ...entities,
      goBackNodeOID: selectedNodeOID,
      approvalTxt
    };
    this.setState({submitLoading: true});
    approveService.returnToNode(params).then(res => {
      this.setState({submitLoading: false});
      this.closeModal(true);
    }).catch(err => {
      this.setState({submitLoading: false});
      errorMessage(err.response);
    });
  };

  handleChangeTxt = (value) => {
    this.setState({approvalTxt: value});
  };

  handleRadioChange = (value) => {
    this.setState({selectedNodeOID: value});
  };

  render() {
    const { modalVisible } = this.props;
    const { loading, submitLoading, approvalTxt, nodeList, selectedNodeOID } = this.state;
    return (
      <div>
        <Modal
          width={760}
          wrapClassName="approve-return"
          title={messages('common-1.key1251')/*退回至*/}
          visible={modalVisible}
          onCancel={() => this.closeModal(false)}
          maskClosable={false}
          destroyOnClose={true}
          footer={[
            <Button key="back" onClick={() => this.closeModal(false)}>{messages('common.cancel')/*取消*/}</Button>,
            <Button
              key="submit"
              type="primary"
              loading={submitLoading}
              disabled={!selectedNodeOID}
              onClick={() => this.handleReturnTo()}
            >
              {messages('common.ok')/*确定*/}
            </Button>
          ]}
        >
          <div style={{maxHeight: 500, overflowY: 'auto'}}>
            <Spin spinning={loading}>
              <If value={loading}>
                <Skeleton />
              </If>
              <If value={!loading && nodeList.length}>
                <div className="return-title">{messages('common-1.key1253')/*退回意见：*/}</div>
                <TextArea
                  maxLength="500"
                  placeholder={messages('common-1.key1259')/*退回意见，最多输入500个字符*/}
                  style={{resize: 'none'}}
                  rows={4}
                  value={approvalTxt}
                  onChange={e => this.handleChangeTxt(e.target.value)}
                />
                <div className="return-label">{messages('common-1.key1260')/*选择退回至*/}</div>
                <div className="node-block">
                  <Timeline>
                    {!!nodeList.length && nodeList.map(node => {
                      return (
                        <Timeline.Item
                          key={node.ruleApprovalNodeOID}
                          color='#BEC8D2'
                        >
                          <Row className="node-row">
                            {node.ruleApprovalNodeOID === selectedNodeOID && <div className="selected-box" />}
                            <div className="radio-block">
                              <Radio
                                value={node.ruleApprovalNodeOID}
                                checked={node.ruleApprovalNodeOID === selectedNodeOID}
                                onChange={e => this.handleRadioChange(e.target.value)}
                              />
                            </div>
                            <div className="node-name">
                              {node.name}
                            </div>
                          </Row>
                        </Timeline.Item>
                      )
                    })}
                  </Timeline>
                </div>
              </If>
              <If value={!loading && !nodeList.length}>
                <div style={{textAlign: 'center'}}>
                  <img src={noNode}/>
                  <div className="no-node">{messages('common-1.key1298')/*没有可退回的节点，您还可以使用驳回或加签*/}</div>
                </div>
              </If>
            </Spin>
          </div>
        </Modal>
      </div>
    )
  }

}

ApproveReturn.propTypes = {
  modalVisible: React.PropTypes.bool,
  onClose: React.PropTypes.func,
  entities: React.PropTypes.object,
  quickTxt: React.PropTypes.string, //审批意见
};

ApproveReturn.defaultProps = {
  modalVisible: false,
  onClose: () => {},
  entities: {},
  quickTxt: ''
};

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps)(ApproveReturn);
